<template>
  <div class="hf-login">
    <div class="login-person">
      <div
        class="person-div"
        v-for="(v, i) in userarr" :key="i"
        @click="inputPassword(i)"
      >
        <div class="person-each">
          <div
            v-for="(h, i) in v.img" :key="i"
            class="person-img person-each-element"
            :style="{ backgroundColor: h.color }"
          ></div>
        </div>
        <span>{{ v.name }}</span>
      </div>
      
      <!-- <div class="person-div person-div-add">
        <img
          class="person-each"
          src="../assets/image/tzw/adduser.png"
          @click="addUserOpen"
        />
      </div> -->
    </div>
  
    <div class="each-password">
      <div
        v-for="(v, i) in defaultImg.img" :key="i"
        class="person-img-pass person-each-element"
        :style="{ backgroundColor: v.color }"
        @click="inputEach(v.position, defaultImg.password)"
      ></div>
    </div>

    <el-dialog title="修改用户" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="form">
        <el-form-item label="名字" :label-width="formLabelWidth" :style="{marginLeft:'15px'}">
          <el-input v-model="form.name" autocomplete="off" :style="{margin:'0px'}"></el-input>
        </el-form-item>
        &nbsp;
        <el-form-item label="身份" :label-width="formLabelWidth" :style="{padding:'0px'}">
          <el-select v-model="form.type" placeholder="请选择您的身份"  :style="{marginLeft:'-40px',width:'220px'}">
            <el-option label="老人" value="老人"></el-option>
            <el-option label="大人" value="大人"></el-option>
            <el-option label="儿童" value="儿童"></el-option>
          </el-select>
        </el-form-item>
        <div class="login-createPass">
          <h4>创建个性头像</h4>
          <div class="createPass-img">
            <div
              @click="drawPass(i)"
              v-for="(v, i) in createPass" :key="i"
              class="creatPass-block"
              :style="{ backgroundColor: v.color }"
            ></div>
          </div>
        </div>
        <div class="hf-penStyle">
          &nbsp;&nbsp;&nbsp;
          <el-button type="primary" @click="resetpaint">重新绘画</el-button> <br /><br><span>画笔颜色</span><br /><br>
          <div
            class="pass-penColor"
            v-for="(v, i) in penColor" :key="i"
            :style="{ backgroundColor: v }"
            @click="ChangePenColor(i)"
          ></div>
          <br /><br />
        </div>&nbsp;
        <el-form-item label="背景" :label-width="formLabelWidth" :style="{marginLeft:'20px'}">
          <el-select v-model="form.background" placeholder="请选择背景颜色" :style="{width:'200px',marginLeft:'0px'}">
            <el-option label="红色" value="red" :style="{backgroundColor:'red',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="绿色" value="green" :style="{backgroundColor:'green',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="黄色" value="yellow" :style="{backgroundColor:'yellow',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="白色" value="white" :style="{backgroundColor:'white',color:'black',width:'180px',margin:'5px 20px',borderRadius:'10px',border:'1px solid'}"></el-option>
            <el-option label="黑色" value="black" :style="{backgroundColor:'black',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="蓝色" value="blue" :style="{backgroundColor:'blue',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="粉色" value="pink" :style="{backgroundColor:'pink',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="灰色" value="gray" :style="{backgroundColor:'gray',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="皮革" value="burlywood" :style="{backgroundColor:'burlywood',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="巧克力" value="chocolate" :style="{backgroundColor:'chocolate',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="肉色" value="khaki" :style="{backgroundColor:'khaki',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
            <el-option label="绿蓝" value="darkturquoise" :style="{backgroundColor:'darkturquoise',color:'white',width:'180px',margin:'5px 20px',borderRadius:'10px'}"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样式" :label-width="formLabelWidth" :style="{marginLeft:'10px'}">
          <el-select v-model="form.style" placeholder="选择默认样式？" :style="{width:'220px',marginLeft:'0px'}">
            <el-option label="爱心" value="爱心"></el-option>
            <el-option label="小鱼" value="小鱼"></el-option>
            <el-option label="月亮" value="月亮"></el-option>
          </el-select>
        </el-form-item>
        <br />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="添加密码"
      :visible.sync="dialogaddPassVisible"
      width="600px"
    >
      <el-form :model="form">
        <div class="login-createPass">
          <h4>请依次点击4个想要的头像像素方块，以创建密码</h4>
          <br />
          <div class="createPass-img">
            <div
              @click="createPassFunc(i)"
              v-for="(v, i) in createPass" :key="i"
              class="creatPass-block"
              :style="{ backgroundColor: v.color }"
            ></div>
          </div>
        </div>
        <br />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="successCreateUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.hf-login {
  background: #eee url(../assets/image/tzw/background.jpg) no-repeat;
  background-size: cover;
  .choosed {
    border-top: rgb(13, 233, 141) 1px solid !important;
    border-right: rgb(115, 224, 12) 1px solid !important;
    border-bottom: rgb(62, 86, 223) 1px solid !important;
    border-left: rgb(192, 11, 11) 1px solid !important;
  }
  height: 100%;
  margin: 0;
  width: 100%;
  background-color:rgb(255, 255, 255);
  .el-dialog {
    .el-form-item {
      display: inline-block;
    }
    .hf-penStyle {
      text-align: center;
    }
    .pass-penColor {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      margin-left: 10px;
      border: gray 1px solid;
      display: inline-block;
    }
    .login-createPass {
      text-align: center;
      width: 560px;
      height: 560px;
      h4 {
        margin: 0px;
        padding: 0px;
      }
      .createPass-img {
        width: 520px;
        height: 520px;
        margin-left: 20px;
        border: 1px solid;
        border-radius: 20px;
        overflow: hidden;
        .creatPass-block {
          width: 52px;
          height: 52px;
          float: left;
          border: none;
          box-sizing: border-box;
          &:hover {
            border-top: rgb(13, 233, 141) 1px solid;
            border-right: rgb(115, 224, 12) 1px solid;
            border-bottom: rgb(62, 86, 223) 1px solid;
            border-left: rgb(192, 11, 11) 1px solid;
          }
        }
      }
    }
  }
  .login-person {
    width: 500px;
    height: 425px;
    display: inline-block;
    border: #eeeeee70 1px solid;
    position: absolute;
    top: calc(50% - 212px);
    left: calc(50% - 250px);
    border-radius: 20px;
    background-color: #eeeeeeb2;
    .person-div {
      font-family: "楷体";
      display: inline-block;
      height: 120px;
      width: 100px;
      margin: 11px;
      text-align: center;
    }
    .person-div-add {
      position: relative;
      top: -18px;
    }
    .person-each {
      display: inline-block;
      height: 100px;
      width: 100px;
      border: 1px solid;
      border-radius: 140px;
      overflow: hidden;
      .person-img {
        height: 10px;
        width: 10px;
        float: left;
      }
    }
  }
  .each-password {
    width: 520px;
    height: 520px;
    display: none;
    position: absolute;
    top: calc(50% - 260px);
    left: calc(50% - 260px);
    border-radius: 20px;
    border: 1px solid;
    overflow: hidden;
    background-color: white;
    .person-img-pass {
      width: 52px;
      height: 52px;
      float: left;
      border: none;
      box-sizing: border-box;
      &:hover {
        border-top: rgb(13, 233, 141) 1px solid;
        border-right: rgb(115, 224, 12) 1px solid;
        border-bottom: rgb(62, 86, 223) 1px solid;
        border-left: rgb(192, 11, 11) 1px solid;
      }
    }
  }
}
</style>
<script>
import axios from "axios";
export default {
  data: function () {
    return {
      createPass: [
        { color: "white", position: "hf-01" },
        { color: "white", position: "hf-02" },
        { color: "white", position: "hf-03" },
        { color: "white", position: "hf-04" },
        { color: "white", position: "hf-05" },
        { color: "white", position: "hf-06" },
        { color: "white", position: "hf-07" },
        { color: "white", position: "hf-08" },
        { color: "white", position: "hf-09" },
        { color: "white", position: "hf-010" },

        { color: "white", position: "hf-011" },
        { color: "white", position: "hf-012" },
        { color: "white", position: "hf-013" },
        { color: "white", position: "hf-014" },
        { color: "white", position: "hf-015" },
        { color: "white", position: "hf-016" },
        { color: "white", position: "hf-017" },
        { color: "white", position: "hf-018" },
        { color: "white", position: "hf-019" },
        { color: "white", position: "hf-020" },

        { color: "white", position: "hf-021" },
        { color: "white", position: "hf-022" },
        { color: "white", position: "hf-023" },
        { color: "white", position: "hf-024" },
        { color: "white", position: "hf-025" },
        { color: "white", position: "hf-026" },
        { color: "white", position: "hf-027" },
        { color: "white", position: "hf-028" },
        { color: "white", position: "hf-029" },
        { color: "white", position: "hf-030" },

        { color: "white", position: "hf-031" },
        { color: "white", position: "hf-032" },
        { color: "white", position: "hf-033" },
        { color: "white", position: "hf-034" },
        { color: "white", position: "hf-035" },
        { color: "white", position: "hf-036" },
        { color: "white", position: "hf-037" },
        { color: "white", position: "hf-038" },
        { color: "white", position: "hf-039" },
        { color: "white", position: "hf-040" },

        { color: "white", position: "hf-041" },
        { color: "white", position: "hf-042" },
        { color: "white", position: "hf-043" },
        { color: "white", position: "hf-044" },
        { color: "white", position: "hf-045" },
        { color: "white", position: "hf-046" },
        { color: "white", position: "hf-047" },
        { color: "white", position: "hf-048" },
        { color: "white", position: "hf-049" },
        { color: "white", position: "hf-050" },

        { color: "white", position: "hf-051" },
        { color: "white", position: "hf-052" },
        { color: "white", position: "hf-053" },
        { color: "white", position: "hf-054" },
        { color: "white", position: "hf-055" },
        { color: "white", position: "hf-056" },
        { color: "white", position: "hf-057" },
        { color: "white", position: "hf-058" },
        { color: "white", position: "hf-059" },
        { color: "white", position: "hf-060" },

        { color: "white", position: "hf-071" },
        { color: "white", position: "hf-072" },
        { color: "white", position: "hf-073" },
        { color: "white", position: "hf-074" },
        { color: "white", position: "hf-075" },
        { color: "white", position: "hf-076" },
        { color: "white", position: "hf-077" },
        { color: "white", position: "hf-078" },
        { color: "white", position: "hf-079" },
        { color: "white", position: "hf-070" },

        { color: "white", position: "hf-081" },
        { color: "white", position: "hf-082" },
        { color: "white", position: "hf-083" },
        { color: "white", position: "hf-084" },
        { color: "white", position: "hf-085" },
        { color: "white", position: "hf-086" },
        { color: "white", position: "hf-087" },
        { color: "white", position: "hf-088" },
        { color: "white", position: "hf-089" },
        { color: "white", position: "hf-090" },

        { color: "white", position: "hf-091" },
        { color: "white", position: "hf-092" },
        { color: "white", position: "hf-093" },
        { color: "white", position: "hf-094" },
        { color: "white", position: "hf-095" },
        { color: "white", position: "hf-096" },
        { color: "white", position: "hf-097" },
        { color: "white", position: "hf-098" },
        { color: "white", position: "hf-099" },
        { color: "white", position: "hf-0100" },

        { color: "white", position: "hf-0101" },
        { color: "white", position: "hf-0102" },
        { color: "white", position: "hf-0103" },
        { color: "white", position: "hf-0104" },
        { color: "white", position: "hf-0105" },
        { color: "white", position: "hf-0106" },
        { color: "white", position: "hf-0107" },
        { color: "white", position: "hf-0108" },
        { color: "white", position: "hf-0109" },
        { color: "white", position: "hf-0110" },
      ],
      userarr: [],
      defaultImg: [],
      passLength: 4,
      penColor: ["green", "red", "blue", "yellow", "white", "black", "pink",'gray','burlywood',"chocolate",'khaki','darkturquoise'],
      currentPenColor: "blue",
      dialogFormVisible: false,
      dialogaddPassVisible: false,
      countMember: 0,
      form: {
        name: "",
        type: "大人",
        background: "",
        style: "",
      },
      defaultBackground: "white",
      formLabelWidth: "40px",
      defaultPass: "hf-016/hf-017/hf-018/hf-019",
      confirmPass: [],
    };
  },
  methods: {
    inputPassword(i) {
      let eachPass = document.querySelector(".hf-login .each-password");
      eachPass.style.display = "inline-block";
      this.defaultImg = this.userarr[i];
      console.log(this.defaultImg.id);
      this.confirmPass = [];
      console.log(this.userarr[i]);
    },
    resetpaint(){
      this.createPass.forEach((v) => {
        v.color = "white";
      });
    },
    addUserOpen() {
      this.createPass.forEach((v) => {
        v.color = "white";
      });
      this.dialogFormVisible = true;
      this.form.background = "";
      this.form.style = "";
      this.form.name = "";
      this.defaultBackground = "white";
    },
    drawPass(i) {
      this.createPass[i].color = this.currentPenColor;
    },
    ChangePenColor(i) {
      this.currentPenColor = this.penColor[i];
    },
    inputEach(position, password) {
      if (event.target.classList.contains("choosed")) {
        event.target.classList.remove("choosed");
        for (let i = 0; i < this.confirmPass.length; i++) {
          if (this.confirmPass[i] == position) {
            this.confirmPass.splice(i, 1);
          }
        }
      } else {
        event.target.classList.add("choosed");
        this.confirmPass.push(position);
        let confirmLogin = this.confirmPass.join("/");
        if (confirmLogin == password) {
          console.log(String(this.defaultImg.id),3333);
          sessionStorage.setItem('userId',String(this.defaultImg.id))
          this.addUserOpen();
          this.confirmPass=[]
          document.querySelector(".hf-login .each-password").style.display =
            "none";
        }
      }
    },
    addUser() {
      this.dialogFormVisible = false;
      this.dialogaddPassVisible = true;
    },
    createPassFunc(i) {
      if (event.target.classList.contains("choosed")) {
        event.target.classList.remove("choosed");
        this.passLength++;
        for (let j = 0; j < this.confirmPass.length; j++) {
          if (this.createPass[i].position == this.confirmPass[j]) {
            this.confirmPass.splice(j, 1);
          }
        }
      } else {
        if (this.passLength > 0) {
          event.target.classList.add("choosed");
          this.confirmPass.push(this.createPass[i].position);
          this.passLength--;
        }
      }
    },
    successCreateUser() {
      if (this.passLength == 0) {
        let confirmLogin = this.confirmPass.join("/");
        this.confirmPass = [];
        this.passLength = 4;
        this.dialogaddPassVisible = false;
        let allImg = document.querySelectorAll(
          ".createPass-img .creatPass-block"
        );
        allImg.forEach((v) => {
          if (v.classList.contains("choosed")) {
            v.classList.remove("choosed");
          }
        });
        let id=sessionStorage.getItem('userId');
         axios({
          url: "dbdata/newPersonImg",
        }).then(({data})=>{
          return axios({
              url: "dbdata/user/"+id+"",
              method: "patch",
              data: {
                name: this.form.name,
                type: this.form.type,
                img: `/dbdata/newPersonImg/${++data.length}`,
                password: confirmLogin,
              },
            })
        }).then((res) => {
               return axios({
              url: "dbdata/newPersonImg",
              method: "post",
              data: {
                img: this.createPass,
              },
            });            
          }).then(()=>{
            this.$router.push('/happyhome/home')
          })
      };

    },
    waitToupload(i,data){
      axios.patch('/dbdata/userTalk/'+i+'',{order:data[i-1].order}).then(()=>{
        console.log(i);
      })
    },
    goTOHome(){
      this.$router.go(0);
      this.addwait=0
    }
  },

  watch: {
    form: {
      handler() {
        console.log('watch');
        this.createPass.forEach((v) => {
          if (v.color == this.defaultBackground) {
            v.color = this.form.background;
          }
        });
        this.defaultBackground = this.form.background;
        if(this.form.style==''){
        }else{
          switch(this.form.style){
            case '爱心':
              axios({
                url:'dbdata/heart',
              }).then((res)=>{
                this.createPass=res.data
              })
              break;
            case '月亮':
              axios({
                url:'dbdata/moon',
              }).then((res)=>{
                this.createPass=res.data
              })
              break;
            case '小鱼':
              axios({
                url:'dbdata/fish',
              }).then((res)=>{
                this.createPass=res.data
              })
              break;
          }
        }
      },
      deep: true,
    }
  },
  mounted() {
    let id=sessionStorage.getItem('userId')
    axios({
      url: "/dbdata/user/"+id+"",
    }).then(({data}) => {
        axios({
          url: data.img,
        }).then((res1) => {
          this.userarr.push({
            id:data.id,
            name: data.name,
            img: res1.data.img ? res1.data.img : res1.data,
            type: data.type,
            password: data.password,
          });
        });
    });
    document.querySelector("body").addEventListener("click", function () {
      let eachPass = document.querySelector(".hf-login .each-password");
      if (
        event.target.className.includes("each-password") ||
        event.target.className.includes("person-each") ||
        event.target.className.includes("person-each-element")
      ) {
      } else {
        if (eachPass) {
          eachPass.style.display = "none";
          this.confirmPass = [];
          let allImg = document.querySelectorAll(
            ".person-img-pass.person-each-element"
          );
          allImg.forEach((v) => {
            if (v.classList.contains("choosed")) {
              v.classList.remove("choosed");
            }
          });
        }
      }
    });
  },
};
</script>
